import { businessConfigs, businessConfigUpdate } from "@/services/workOrder";
import { Button, Cascader, Form, Radio, Select } from "antd";
import moment from "moment";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';

class WorkOrderInfoProcess extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      isEdit:false,
      configs:{
        businessType:[],
        emergencyLevels:[],
        modules:[],
        products:[],
        questionTypes:[]
      }
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  changeInfo = () => {
    this.setState({
      isEdit:true
    },() => {
      this.getConfigs()
      const { detail } = this.props;
      this.props.form.setFieldsValue({
        moduleId:detail.moduleId,
        businessId:detail.businessId,
        emergencyLevelId:detail.emergencyLevelId,
        productId:detail.productId.split(","),
        questionTypeId:detail.questionTypeId
      })
    })
  }

  getConfigs = async () => {
    const res = await businessConfigs()    
    this.setState({configs:{...res,products:this.deepTree(res.products)}})
  }

  deepTree = (data) => {
    data.map(item => {
      item.text = item.name;
      item.value = item.id;
      item.label = item.name
      if(item.children && item.children.length > 0){
        this.deepTree(item.children)
      }else{
        delete item.children
      }
    })
    return data
  }

  validateForm = () => {
    this.props.form.validateFields((error,values) => {
      if(!error){
        this.props.doDealtwithTime('workOrderInfo',values)
      }
    })
  }

  doUpdate = async values => {
    values.id = this.props.detail.id
    values.productId = values.productId.toString()
    const res = await businessConfigUpdate(values)
    this.setState({
      isEdit:false
    },() => {
      if(this.props.updateInfo){
        this.props.updateInfo()
      }
    })
  }

  render(){
    const { detail,form:{getFieldDecorator},updateTicket } = this.props;
    const { isEdit,configs } = this.state;
    const renderStatus = ticketStatus => {
      return ticketStatus == 1 ? formatMessage({id: 'pages.workOrder.processing.status.pendingAssign'}) : 
             ticketStatus == 2 ? formatMessage({id: 'pages.workOrder.processing.status.pendingProcess'}) : 
             ticketStatus == 3 ? formatMessage({id: 'pages.workOrder.processing.status.processing'}) : 
             ticketStatus == 4 ? formatMessage({id: 'pages.workOrder.processing.status.resolved'}) : ''
    }
    const boxStyle2 = {
      display:"flex",
      alignItems:"flex-start",
      marginBottom:10    
    }
    const boxStyle = {
      display:"flex",
      alignItems:"flex-start",
      marginBottom:20    
    }
    const labelStyle = {
      width:100,
      flexShrink:0,
      textAlign:'right'
    }
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    const renderExtraFields = item => (
      <div key={item.id} style={{borderBottom:"1px solid rgb(239, 239, 239)",marginBottom:10}}>
        <div style={boxStyle2}>
          <div style={labelStyle}>{item.labelA}：</div>
          <div>{item.fieldA}</div>
        </div>
        <div style={boxStyle2}>
          <div style={labelStyle}>{item.labelB}：</div>
          <div>{item.fieldB}</div>
        </div>
      </div>
    )

    if(isEdit){
      return (
        <Form {...formItemLayout} className="workOrderReplayForm">
        
          <Form.Item label={formatMessage({id: 'pages.workOrder.processing.form.productName'})}>
                          {getFieldDecorator("productId",{rules:[{required:true,message:formatMessage({id: 'pages.workOrder.processing.validation.required'})}]})(
              <Cascader options={configs.products}  placeholder="" />
            )}
          </Form.Item>
          <Form.Item label={formatMessage({id: 'pages.workOrder.processing.form.moduleName'})}>
            {getFieldDecorator("moduleId",{rules:[{required:true,message:formatMessage({id: 'pages.workOrder.processing.validation.required'})}]})(
              <Select>
                {
                  configs.modules.map(item => {
                    return <Select.Option value={item.id} key={item.id}>{item.moduleName}</Select.Option>
                  })
                }
              </Select>
            )}
          </Form.Item>
          <Form.Item label={formatMessage({id: 'pages.workOrder.processing.form.businessCategory'})}>
            {getFieldDecorator("businessId",{rules:[{required:true,message:formatMessage({id: 'pages.workOrder.processing.validation.required'})}]})(
              <Select>
                {
                  configs.businessType.map(item => {
                    return <Select.Option value={item.id} key={item.id}>{item.businessType}</Select.Option>
                  })
                }
              </Select>
            )}
          </Form.Item>
          <Form.Item label={formatMessage({id: 'pages.workOrder.processing.form.questionCategory'})}>
            {getFieldDecorator("questionTypeId",{rules:[{required:true,message:formatMessage({id: 'pages.workOrder.processing.validation.required'})}]})(
              <Select>
                {
                  configs.questionTypes.map(item => {
                    return <Select.Option value={item.id} key={item.id}>{item.questionType}</Select.Option>
                  })
                }
              </Select>
            )}
          </Form.Item>
          <Form.Item label={formatMessage({id: 'pages.workOrder.processing.form.urgencyLevel'})}>
            {getFieldDecorator("emergencyLevelId",{rules:[{required:true,message:formatMessage({id: 'pages.workOrder.processing.validation.required'})}]})(
              <Radio.Group>
                {
                  configs.emergencyLevels.map(item => {
                    return <Radio value={item.id} key={item.id}>{item.emergencyLevel}</Radio>
                  })
                }
              </Radio.Group>
            )}
          </Form.Item>
          <div style={{textAlign:"right"}}>
            <Button onClick={() => this.setState({isEdit:false})} style={{marginRight:10}}>{formatMessage({id: 'pages.workOrder.processing.button.cancel'})}</Button>
            <Button onClick={this.validateForm} type="primary">{formatMessage({id: 'pages.workOrder.processing.button.update'})}</Button>
          </div>
        </Form>
      )
    }
  
    return (
      <div style={{color:"#000000"}}>
        <div style={boxStyle}>
          <div style={labelStyle}>{formatMessage({id: 'pages.workOrder.processing.label.emergencyLevel'})}：</div>
          <div>{detail.emergencyLevelStr}</div>
        </div>
        {
          updateTicket ? '' : (
            <div>
            <div style={boxStyle}>
              <div style={labelStyle}>{formatMessage({id: 'pages.workOrder.processing.label.orderNumber'})}：</div>
              <div>{detail.orderNum}</div>
            </div>
            <div style={boxStyle}>
              <div style={labelStyle}>{formatMessage({id: 'pages.workOrder.processing.label.submitter'})}：</div>
              <div>{detail.submitUserName}</div>
            </div>
            </div>
          )
        }
        
  
        {
          detail.attachFiles && detail.attachFiles.length > 0 ? (
            <div style={boxStyle}>
              <div style={labelStyle}>{formatMessage({id: 'pages.workOrder.processing.label.attachments'})}：</div>
              <div>
                {
                  detail.attachFiles.map(item => (
                    <div key={item.id} style={{marginBottom:10}}><a href={item.path} target="_blank" download>{item.fileName}</a></div>
                  ))
                }
              </div>
              
            </div>
          ) : ''
        }

        <div style={{marginTop:20}}>
          {
            detail.toProduct && detail.toProduct.length > 0 ? (
              <div>
                <b>{formatMessage({id: 'pages.workOrder.processing.button.transferProduct'})}</b>
                {
                  detail.toProduct.map(item => {
                    return renderExtraFields({...item,labelA:formatMessage({id: 'pages.workOrder.processing.label.productTicket'}),labelB:formatMessage({id: 'pages.workOrder.processing.label.productLink'})})
                  })
                }
              </div>
            ) : ''
          }

          {
            detail.toDevelop && detail.toDevelop.length > 0 ? (
              <div>
                <b>{formatMessage({id: 'pages.workOrder.processing.button.transferDev'})}</b>
                {
                  detail.toDevelop.map(item => {
                    return renderExtraFields({...item,labelA:formatMessage({id: 'pages.workOrder.processing.label.devTicket'}),labelB:formatMessage({id: 'pages.workOrder.processing.label.devLink'})})
                  })
                }
              </div>
            ) : ''
          }

          {
            detail.associatedProjects && detail.associatedProjects.length > 0 ? (
              <div>
                <b>{formatMessage({id: 'pages.workOrder.processing.button.linkProject'})}</b>
                {
                  detail.associatedProjects.map(item => {
                    return renderExtraFields({...item,labelA:formatMessage({id: 'pages.workOrder.processing.label.projectName'}),labelB:formatMessage({id: 'pages.workOrder.processing.label.projectCode'})})
                  })
                }
              </div>
            ) : ''
          }
        </div>
      </div>
    )
  }
}

export default Form.create()(WorkOrderInfoProcess)